<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue">
   <select  @change="changeVal($event)" v-model="selOption">

     <template v-for="(site,index) in sites" :site="site":index="index" :key="site.id">

        <option v-if="index==0" :value="site.name" selected>{{site.name}}</option>
        <option v-else :value="site.name">{{site.name}}</option>
     </template>





   </select>

<div>您选中了:{{selOption}}</div>
</div>







<script>
const HelloVueApp = {
  data() {
    return {
     selOption:'Runoob',
    sites:[{id:1,name:"Google"},{id:2,name:"Runoob"},{id:3,name:"Taobao "}],
     message:''
    }
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    },
    changeVal:function(event){
        this.selOption=event.target.value;
        alert("你选中了："+this.selOption);
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>